---
title: API Documentation
has_mavo: true
includes: '<link rel="stylesheet" href="https://mavo.io/docs/style.css">'
---

<div class="language-javascript" mv-app="api"
      mv-storage="https://github.com/leaverou/color.js/api/api.json"
      mv-plugins="markdown"
      mv-expressions-ignore="mv-github-commit-prefix" mv-github-commit-prefix="[API] ">

<section id="api">
	<div class="mv-bar mv-ui"></div>

	<div property="collapse" mv-storage="none" class="filter">
		Collapse all:
		<label>
			<input type="checkbox" property="classes">
			classes
		</label>
		<label>
			<input type="checkbox" property="members" checked>
			members
		</label>
		<label>
			<input type="checkbox" property="arguments">
			arguments
		</label>
	</div>

	<details property="className" open="[!collapse.classes or $hash = name]" mv-multiple id="[name]-[filename]">
		<summary>
			<h2><a href="#[name]-[filename]" property="name" mv-attribute="none">Mavo</a></h2>
			<p class="[if(!parent, 'hide-on-read')] inherits">
				Inherits from <a href="#[parent]" property="parent" mv-attribute="none"></a>
			</p>
			<p class="defined">Defined in <a href="https://github.com/mavoweb/mavo/blob/master/src/[filename]" property="filename" mv-attribute="none" target="_blank">mavo.js</a></p>
		</summary>

		<p property="description" class="markdown">`Mavo` is the main class. Every Mavo app is an instance of `Mavo` and `mavo.js` is the entry point of Mavo itself.</p>

		<h3>Members</h3>

		<details property="member" open="[!collapse.members]" mv-multiple class="role-[role]" id="[id]">
			<meta property="id" content="[if(role = 'constructor', 'new-')][className.name][if(static, '.', '#')][name]" />

			<summary>
				<h4><a href="#[id]">[if(role = 'constructor', 'new ' & className.name, if (static, className.name, lowercase(className.name)) & ".")]<span property="name" data-arguments="[join(argument.summary, ', ')]"></span></a></h4>
				<span property="type" mv-if="role != 'constructor' and role != 'function'" foo="role != 'function'"></span>
				<span class="type">[returnType]</span>
				<span property="static" class="mv-toggle" mv-if="role != 'constructor'">Static</span>
				<span property="role" mv-edit="#role-select"></span>
			</summary>

			<p property="description" class="markdown"></p>

			<details mv-if="role = 'function' or role = 'constructor'" class="[if(!returnType and !returnDescription and isVoid, 'hide-on-read')]" open="[!collapse.arguments]">
				<summary>Arguments ([count(argument.name)])<span mv-if="role != 'constructor'"> & Return Value</span></summary>

				<table>
					<thead>
						<th>Name</th>
						<th>Type</th>
						<th>Description</th>
					</thead>
					<tbody class="[if(isVoid, 'hide-on-read')]">
						<tr property="argument" mv-multiple>
							<td>
								<span property="name"></span>
								<span property="optional" class="mv-toggle">Optional</span>

								<meta property="summary" mv-value="if (
                                    name = 'options',
                                    '{' & (join(replace(filter(member.argument.name, starts(member.argument.name, 'options.')), 'options.', ''), ', ') or '...options') & '}',
                                    if (starts(name, 'options.'), '', if(optional, '[' & name & ']', name))
                                )">
							</td>
							<td property="type"></td>
							<td property="description" class="markdown"></td>
						</tr>
					</tbody>
					<tfoot mv-if="role != 'constructor'" class="[if(!returnType and !returnDescription, 'hide-on-read')]">
						<tr>
							<td>Returns</td>
							<td property="returnType"></td>
							<td property="returnDescription"></td>
						</tr>
					</tfoot>
				</table>
			</details>
			<meta property="isVoid" content="[count(argument.name) = 0]">
		</details>
	</details>

	<aside id="contents">
        <ul id="toc">
    		<li mv-multiple="toc" mv-value="className" mv-group>
    			<a href="#[name]-[filename]">[name] ([filename])</a>
    		</li>
    	</ul>
    </aside>
</section>
</div>
<script src="api.js"></script>

<div hidden>
	<select id="role-select">
		<option value="function">Function</option>
		<option value="property">Property</option>
		<option value="accessor">Accessor</option>
		<option value="constructor">Constructor</option>
	</select>
</div>